import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Breadcrumb, Anchor, Table, Upload, Button, message } from 'antd';
import { findMatterById } from '@/services/homePage/homePage';
import lineimg from '../../../assets/policyDeclare/line.svg';
import { connect, history } from 'umi';
import { getIsLogin, highLight, newsDetail, scrollToTop } from '@/utils/util';

const { Link } = Anchor;

const PolicyDeclare: React.FC = (props) => {
  const { dispatch }: any = props;
  const [list, setList] = useState([]);
  const [filelist, setFilelist] = useState([]);
  const [policyDeclareTable, setPolicyDeclareTable] = useState([]);
  const { id } = props.history.location.query;
  useEffect(() => {
    window.scroll(0, 0);
    findMatterById({ id })
      .then((resp) => {
        setList(resp.results);
        const flist = resp.results.policyBasisFilename;
        const flisturl = resp.results.policyBasisUrl;
        setFilelist([{ url: flisturl, name: flist }]);
        const pflist = resp.results.policyInfoDeclareMaterials;
        pflist?.forEach((item) => {
          Object.assign(item, {
            uploadfile: [
              {
                name: item.title || '',
                url: item.url || '',
              },
            ],
          });
        });
        pflist?.forEach((item, index) => {
          Object.assign(item, {
            num: index + 1,
          });
        });
        setPolicyDeclareTable(pflist);
      })
      .catch((error) => {
        throw error;
      });
  }, []);
  const columns = [
    {
      title: '序号',
      dataIndex: 'num',
      key: 'num',
      width: 20,
    },
    {
      title: '材料名称',
      dataIndex: 'fileName',
      key: 'fileName',
      width: 120,
      render: (text: string, record: any) => {
        return (
          <div
            title={text}
            style={{
              maxWidth: 120,
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
            }}
          >
            {text}
          </div>
        );
      },
    },
    {
      title: '模板下载',
      key: 'uploadfile',
      width: 100,
      render: (record) => {
        if (record.uploadfile[0].url === '') {
          return <div>-</div>;
        }
        return (
          <div
            style={{
              paddingBottom: 25,
              maxWidth: 150,
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
            }}
          >
            <Upload {...props} fileList={record.uploadfile} disabled={true}></Upload>
          </div>
        );
      },
    },
  ];

  const handleClick = (
    e: React.MouseEvent<HTMLElement>,
    link: {
      title: React.ReactNode;
      href: string;
    },
  ) => {
    e.preventDefault();
  };

  const gotoOnlineApply = (pId: any, status: any) => {
    if (!getIsLogin()) {
      message.error('请先登录');
      history.push({ pathname: '/' });
      highLight(dispatch, 'home');
      scrollToTop();
      return;
    }
    if (status === '01') {
      message.error('未开始申报');
      return;
    }
    if (status === '03') {
      message.error('已截止申报');
      return;
    }
    if (status === '02') {
      history.push({ pathname: '/onlineApply', query: { id: pId } });
    }
  };

  return (
    <div className={styles.contentBack}>
      <div className={styles.contentMiddle}>
        {/* 面包屑 */}
        <div className={styles.breadcrumb}>
          <Breadcrumb separator="">
            <Breadcrumb.Item>您的位置</Breadcrumb.Item>
            <Breadcrumb.Separator>:</Breadcrumb.Separator>
            <Breadcrumb.Item href="">首页</Breadcrumb.Item>
            <Breadcrumb.Separator />
            <Breadcrumb.Item href="#/policyList">政策申报</Breadcrumb.Item>
            <Breadcrumb.Separator />
            <Breadcrumb.Item>政策详情</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        {/* 政策main */}
        <div>
          <div style={{ float: 'left' }}>
            <Anchor onClick={handleClick} affix={true} targetOffset={100}>
              <Link href="#title" title="事项名称">
                <div></div>
              </Link>
              <Link href="#declareCondition" title="申报条件">
                <div></div>
              </Link>
              <Link href="#explainDept" title="解释部门">
                <div></div>
              </Link>
              <Link href="#processingTime" title="办理时间">
                <div></div>
              </Link>
              <Link href="#rewardStandard" title="奖励标准">
                <div></div>
              </Link>
              <Link href="#declareEndTime" title="申报时限">
                <div></div>
              </Link>
              <Link href="#processTimeLimit" title="办理流程和时限">
                <div></div>
              </Link>
              <Link href="#policyInfoDeclareMaterials" title="申请材料">
                <div></div>
              </Link>
              <Link href="#policyBasis" title="政策依据">
                <div></div>
              </Link>
            </Anchor>
          </div>

          <div className={styles.policyRight}>
            <div className={styles.title} id="title">
              {list?.title}
            </div>
            <div id="declareCondition" style={{ paddingTop: '30px' }}>
              <div className={styles.declaretitle}>申报条件</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <div className={styles.declaremain}>
                  <span>{list?.declareCondition}</span>
                </div>
              </div>
            </div>
            <div id="explainDept" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>解释部门</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <div className={styles.declaremain}>
                  <span className={styles.dreport}>主管部门:</span>
                  <span>{list?.explainDept}</span>
                </div>
              </div>
            </div>
            <div id="processingTime" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>办理时间</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <div className={styles.declaremain}>
                  <span className={styles.dreport}>办理时间:</span>
                  <span>{list?.processingTime}</span>
                </div>
              </div>
            </div>
            <div id="rewardStandard" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>奖励标准</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <div className={styles.declaremain}>
                  <span className={styles.dreport}>联系人:</span>
                  <span>{list?.publishPerson}</span>
                </div>
                <div className={styles.declaremain}>
                  <span className={styles.dreport}>联系方式:</span>
                  <span>{list?.contactDetails}</span>
                </div>
              </div>
            </div>
            <div id="declareEndTime" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>申报时限</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <div className={styles.declaremain}>
                  <span className={styles.dreport}>申报开始时间:</span>
                  <span>{list?.declareStartTime}</span>
                </div>
                <div className={styles.declaremain}>
                  <span className={styles.dreport}>申报截止时间:</span>
                  <span>{list?.declareEndTime}</span>
                </div>
              </div>
            </div>
            <div id="processTimeLimit" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>办理流程和时限</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <div style={{ width: '50%', margin: '0 auto' }}>
                  <img src={list?.processTimeLimit} width="100%" height="400px" />
                </div>
              </div>
            </div>
            <div id="policyInfoDeclareMaterials" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>申报材料</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <Table columns={columns} dataSource={policyDeclareTable} pagination={false}></Table>
              </div>
            </div>
            <div id="policyBasis" style={{ paddingTop: '20px' }}>
              <div className={styles.declaretitle}>政策依据</div>
              <div className={styles.lineimg}>
                <img src={lineimg} width="100%" />
              </div>
              <div className={styles.declarecontent}>
                <Upload {...props} fileList={filelist} disabled={true}></Upload>
              </div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <button
                className={styles.declarebutton}
                onClick={gotoOnlineApply.bind('', id, list.matterStatus)}
              >
                立即申报
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default connect(({ current }: any) => ({
  CurrentState: current.CurrentState,
}))(PolicyDeclare);
